<template>
  <div class="homeBottomRight">
    <!-- 实时数据部分 -->
    <div class="class-title-icon">
      <div class="title">实时数据</div>
    </div>
    <!-- 实时数据 表格内容 -->
    <div class="homeTable">
      <el-table :data="tableData4" height="266" :header-cell-style="{background: '#141F3B',color:'#23cefd',fontSize:'16px',fontWeight: '400'}">
        <el-table-column prop="createTime" label="上传时间" width="150" align="center"></el-table-column>
        <el-table-column prop="imei" label="IMEI" width="140" align="center"></el-table-column>
        <el-table-column prop="status" label="告警等级" width="86" align="center">
          <template slot-scope="scope">
            <div class="block"><img width="20px" :src="urlMap[scope.row.status]" /></div>
            <!-- <span :style="{color: colorMap[scope.row.status]}">{{scope.row.statusLv}}</span> -->
          </template>
        </el-table-column>
        <el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="" label="项目类型" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.projectType === '1' ">水利</span>
            <span v-else-if="scope.row.projectType === '2' ">文保</span>
            <span v-else-if="scope.row.projectType === '3' ">江堤</span>
            <span v-else-if="scope.row.projectType === '4' ">其他</span>
            <span v-else></span>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['historyData4'],
    data(){
      return {
        colorMap:{
          0: '#259b24',
          1: '#0082f6',
          2: '#ffeb3b',
          3: '#e51c23',
          4: '#d16800'
        },
        urlMap:{
          0: require('../../assets/homewarn/level0.png'),
          1: require('../../assets/homewarn/level1.png'),
          2: require('../../assets/homewarn/level2.png'),
          3: require('../../assets/homewarn/level3.png'),
          4: require('../../assets/homewarn/level4.png')
        },
        tableData4:[]
      }
    },
    watch:{
      historyData4: function(data4){
        console.log("this.tableData4:", data4);
        if (data4){
          data4.map(v=>{
            let str = v.statusLv;
            let index = str.lastIndexOf("+")
            str = str.substring(0, index);
            v.statusLv = str;
          })
          this.tableData4 = data4;
        }
      }
    },
  }
</script>

<style scoped>
  @import url('../../assets/css/homeTable.css');
</style>
<style scoped>
  .homeBottomRight{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
</style>
